import React from "react";
import { ResultPage, Card, List } from "antd-mobile";
import Userinfo from "./components/Userinfo";
import {
  UnorderedListOutline,
  PayCircleOutline,
  SetOutline,
  UserOutline,
} from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import { setInfo } from "../../../store/slice/userSlice";
import { useDispatch } from "react-redux";

function Index() {
  let nav = useNavigate();
  let dis = useDispatch();

  return (
    <div>
      <ResultPage status="" title={<Userinfo />} description="">
        <ResultPage.Card style={{ padding: 8 }}>
          <List>
            <List.Item
              prefix={<UnorderedListOutline />}
              onClick={() => nav("/psg")}
            >
              常用乘客
            </List.Item>
            <List.Item
              prefix={<PayCircleOutline />}
              onClick={() => nav("/order-list")}
            >
              我的订单
            </List.Item>
            <List.Item prefix={<SetOutline />} onClick={() => nav("/chat")}>
              客服中心
            </List.Item>
            <List.Item
              prefix={<UserOutline />}
              onClick={() => dis(setInfo(null))}
            >
              退出登录
            </List.Item>
          </List>
        </ResultPage.Card>

        <Card style={{ height: 128, marginTop: 12 }}>搭配 Card 使用</Card>
      </ResultPage>
    </div>
  );
}

export default Index;
